<template>
  <div class="page">
    <!-- <div class="cartBox" > -->
    <div class="cartPosition">
      <indexMb v-if="cardData.type==2" :widthItem="widthItem" :data="cardData" :empId="empId" ref="indexMb" @goCartDetail="goCartDetailFun"></indexMb>
      <indexMb1  v-if="cardData.type==1" :widthItem="widthItem"  :data="cardData" :empId="empId" ref="indexMb1" @goCartDetail="goCartDetailFun"></indexMb1>

    </div>
    <div class="banner" :style="{marginTop:screenHeight*0.35+'rpx'}">
      <swiper class="swiper"  :indicator-dots="indicatorDots" :circular="circular" :interval="interval" :duration="duration" :autoplay="autoplay">

        <swiper-item >
          <!--        <div @click="getDetail(item.id)"  class="bannerBox">-->
          <!--          <img :src="item.imgUrl" alt="">-->
          <!--          <p class="bannerTitle">{{item.description}}</p>-->
          <!--        </div>-->
          <div class="product">
            <ul class="product_list">
              <li @click="getDetail(detailListCopy[0].id)"  >
                <img :src="detailListCopy[0]&&detailListCopy[0].imgUrl" alt="">
                <p class="bannerTitle">{{detailListCopy[0]&&detailListCopy[0].description}}</p>
              </li>
              <li @click="getDetail(detailListCopy[1].id)"  >
                <img :src="detailListCopy[1]&&detailListCopy[1].imgUrl" alt="">
                <p class="bannerTitle">{{detailListCopy[1]&&detailListCopy[1].description}}</p>
              </li>

            </ul>
          </div>
        </swiper-item>
        <swiper-item >
          <div class="product">
            <ul class="product_list">
              <li @click="getDetail(detailListCopy[1].id)"  >
                <img :src="detailListCopy[1]&&detailListCopy[1].imgUrl" alt="">
                <p class="bannerTitle">{{detailListCopy[1]&&detailListCopy[1].description}}</p>
              </li>
              <li @click="getDetail(detailListCopy[2].id)" >
                <img :src="detailListCopy[2]&&detailListCopy[2].imgUrl" alt="">
                <p class="bannerTitle">{{detailListCopy[2]&&detailListCopy[2].description}}</p>
              </li>

            </ul>
          </div>
        </swiper-item>
        <swiper-item >
          <div class="product">
            <ul class="product_list">
              <li @click="getDetail(detailListCopy[2].id)" >
                <img :src="detailListCopy[2]&&detailListCopy[2].imgUrl" alt="">
                <p class="bannerTitle">{{detailListCopy[2]&&detailListCopy[2].description}}</p>
              </li>
              <li @click="getDetail(detailListCopy[3].id)" >
                <img :src="detailListCopy[3]&&detailListCopy[3].imgUrl" alt="">
                <p class="bannerTitle">{{detailListCopy[3]&&detailListCopy[3].description}}</p>
              </li>

            </ul>
          </div>
        </swiper-item>
        <swiper-item >
          <div class="product">
            <ul class="product_list">
              <li @click="getDetail(detailListCopy[3].id)" >
                <img :src="detailListCopy[3]&&detailListCopy[3].imgUrl" alt="">
                <p class="bannerTitle">{{detailListCopy[3]&&detailListCopy[3].description}}</p>
              </li>
              <li @click="getDetail(detailListCopy[0].id)"  >
                <img :src="detailListCopy[0]&&detailListCopy[0].imgUrl" alt="">
                <p class="bannerTitle">{{detailListCopy[0]&&detailListCopy[0].description}}</p>
              </li>

            </ul>
          </div>
        </swiper-item>

      </swiper>
    </div>
    <van-notice-bar
      v-if="!cartId"
      class="fz"
      backgroundColor="#fff"
      left-icon="volume-ozhen"
      text="创建名片后可以使用同功能，名片展示、商品信息展示。"
    />
    <van-notice-bar
      v-if="cartId"
      color="#1989FA"
      backgroundColor="#fff"
      left-icon="volume-ozhen"
      :text="message"
    />
    </div>
</template>
<script>
  import card from '@/components/card'
  import dragSort from '../../components/drap'
  import indexMb from '../../components/indexMb.vue'
  import indexMb1 from '../../components/indexMb1.vue'
  import getUserinfo from '../../components/getUserinfo'
  import shareBox from "../../components/shareBox"
  export default {
    data () {
      return {
        isActive: false,
        circular: true,
        indicatorDots: false,
        btnStatus:"",//按钮类型
        autoplay: false,
        scActive:false,//是否收藏
        interval: 2000,
        widthItem:'90%',
        message:"",
        isShow: false,
        mbNumber: 1,
        duration: 500,
        cartId:"",
        cardData: {},
        isOpen:false,
        userId:"",
        isSc:false,
        isShare:false,
        isCart: false,
        name: '名字',
        cartId1:"",
        screenHeight:375,
        options:{},
        empId:"",//分享后回去父级id
        images: [],
        detailList: [{imgUrl: require('../../../static/images/cun.jpg'),defaultImg: require('../../../static/images/cun.jpg'), id: '',description:"春天",isClick:false,isEdit:false},
          {imgUrl: require('../../../static/images/xia.jpg'),defaultImg: require('../../../static/images/xia.jpg'), id: '',description:"夏天",isClick:false,isEdit:false},
          {imgUrl: require('../../../static/images/qiu.jpg'),defaultImg: require('../../../static/images/qiu.jpg'), id: '',description:"秋天",isClick:false,isEdit:false},
          {imgUrl: require('../../../static/images/dong.jpg'),defaultImg: require('../../../static/images/dong.jpg'), id: '',description:"冬天",isClick:false,isEdit:false}],
        detailListCopy:[]
      }
    },
    onShow () {
      let num = 0;
      let that=this;
      wx.getSystemInfo({
        success: function (res) {
          let clientHeight = res.windowHeight;
          let clientWidth = res.windowWidth;
          let ratio = 750 / clientWidth;
          that.screenHeight=clientHeight * ratio;
          console.log(that.screenHeight)
        }
      });

      // console.log(appId)


      wx.setNavigationBarTitle({
        title: '首页'
      })
      // this.getBanner()
      this.cartId=wx.getStorageSync('cartId')
      this.mbNumber = wx.getStorageSync('mbNumber')
      // this.getListDetail()
      this.cartId1=wx.getStorageSync('cartId1')
      let userInfo = wx.getStorageSync('userInfo')
      if(this.cartId1){
        this.isOpen=true;
        if(!this.empId){
          this.isShare=true;
        }

      }else{
        this.isShare=false;
      }
      if (userInfo) {

        this.isOpen=true;

        this.isShow=false;

        // this.getindexCard()
      }else{

        this.images=this.detailList
      }
    },
    mounted () {

    },
    components: {
      card,
      dragSort,
      indexMb,
      indexMb1,
      getUserinfo,
      shareBox

    },
    onLoad (options) {
      this.options=options;
      console.log(options)

      if(options.userId&&options.userId!=wx.getStorageSync('userId1')){//从分享点击进去
        // setTimeout(()=>{
        //   wx.showToast({
        //     title: `${JSON.stringify(options)}`,
        //     icon: 'success',
        //   })
        // },3000)
        this.empId=options.userId;
        console.log(this.empId)
        this.getToken(options.userId,options)

      }else {//自己点进去
        this.ownInt()
      }
    },
    // 分享
    onShareAppMessage () {

      let shareData= JSON.parse(wx.getStorageSync('shareData'))
      // let Authorization= wx.getStorageSync('Authorization')
      let shareType=wx.getStorageSync('shareType')
      let cartId=wx.getStorageSync('cartId')
      let userId= wx.getStorageSync('userId')
      let shareUrl=wx.getStorageSync('shareUrl')
      let that = this;

      return {
        title:`您好,我是${shareData.company}的${shareData.name},请惠存`, // 转发后 所显示的title
        path: `/pages/index/main?cartId=${cartId}&userId=${userId}&img=${shareData.logo}`, // 相对的路径
        imageUrl:shareData.logo,
        success: (res) => { // 成功后要做的事情
          //console.log(res.shareTickets[0])
          // console.log

          wx.getShareInfo({
            shareTicket: res.shareTickets[0],
            success: (res) => {
              //console.log(res)
              //console.log(that.setData.isShow)
            },
            fail: function (res) {
              // console.log(res)
            },
            complete: function (res) {
              //  console.log(res)
            }
          })
        },
        fail: function (res) {
          // 分享失败
          console.log('分享失败' + res)
        }
      }


    },
    methods: {

      ownInt(){
        this.empId=0

        this.isSc=false;
        let Authorization1=wx.getStorageSync('Authorization1')
        let cartId1=wx.getStorageSync('cartId1')
        let userId1=wx.getStorageSync('userId1')
        if(Authorization1){

          this.isShare=true;
          wx.setStorageSync('Authorization', Authorization1)

        }else{

          this.isShare=false;
        }
        if(cartId1){
          wx.setStorageSync('cartId', cartId1)
        }
        if(userId1){
          wx.setStorageSync('userId', userId1)

        }
        this.getBanner()
        this.getindexCard( wx.getStorageSync('cartId'), wx.getStorageSync('userId'))
        this.getDetailNose();
      },
      getToken(id,options){
        this.$http.request({
          method:"get",
          url:"/api/auth",
          body:{
            "userId": id
          }
        }).then((data)=>{
          if(data.code==200){
            wx.setStorageSync('Authorization', data.data.split(' ')[1])
            wx.setStorageSync('cartId', options.cartId)
            wx.setStorageSync('userId', options.userId)
            console.log(wx.getStorageSync('cartId'))
            this.getBanner()
            this.getDetailNose();

            if(!options.isCartId){
              this.getindexCard(wx.getStorageSync('cartId'),'')
            }else{
              this.getindexCard( "", wx.getStorageSync('userId'))
            }

            this.isOpen=true;
            this.isSc=true;
            this.isShare=false;
          }
        })
      },
      goCartDetailFun(){//点击卡片回调
        if(!this.empId){
          wx.reLaunch({ url: `/pages/cardDetail/main?id=${this.cardData.id}` })
        }else{
          wx.navigateTo({ url: `/pages/indexDetail/main?id=${this.cardData.id}` })
        }
      },
      getDetailNose(){
        let cartId=wx.getStorageSync('cartId')
        this.$http.request({
          method:"get",
          url:`/api/promotion/detailByCardId`,
          body:{
            cardId:cartId

          }
        }).then((data)=>{
          if(data.code==200){
            this.id=data.data.id;
            this.message=data.data.description||"感谢您使用销帮电子名片   您的需求永远是我们最大的追求 如有疑问请在客服留言"
          }else{

          }
        })
      },

      goCartDetail(){
        this.ownInt();
        let cartId1=wx.getStorageSync('cartId1')
        wx.reLaunch({ url: `/pages/cardDetail/main?id=${cartId1}` })
        // console.log(this.empId)
        // if(this.empId){
        //     wx.reLaunch({ url: `/pages/cardDetail/main?id=${this.cardData.id}` })
        // }else{
        //     wx.navigateTo({ url: `/pages/indexDetail/main?id=${this.cardData.id}` })
        // }
      },
      // changeDomFun(userid){//登陆成功后回调
      //   this.userId=userid;
      //   wx.setStorageSync('isEdit', 0)
      //   wx.navigateTo({ url: '/pages/createCard/main' })
      //   // this.getBanner()
      //   // this.getindexCard()
      // },

      getindexCard (cartId,userId) {
        //     let cartId= wx.getStorageSync('cartId')
        // let userId= wx.getStorageSync('userId')
        this.$http.request({
          method: 'get',
          url: `/api/card/detail`,
          body: {
            cardId:cartId||'',
            userId:userId||''
          }
        }).then((data) => {
          if (data.code == 200) {
            wx.setStorageSync('cartId', data.data.id)
            wx.setStorageSync('isVip', data.data.isVip)

            this.isCart = true
            this.cardData = data.data
            let obj={};
            obj.logo=data.data.logo;
            obj.name=data.data.name;
            obj.company=data.data.company;
            wx.setStorageSync('shareData', JSON.stringify(obj));
          } else {
            this.cardData = ''
            wx.showToast({
              title: `${data.message}`,
              icon: 'none',
              duration: 2000
            })
          }
        })
      },
      getBanner () {
        this.detailListCopy=this.detailList.concat([])
        let cartId = wx.getStorageSync('cartId')
        this.$http.request({
          method: 'get',
          url: '/api/banner/list',
          body: {
            cardId: cartId
          }
        }).then((data) => {
          if (data.code == 200) {
            this.images = data.data
            if(this.images.length){
              this.images.forEach((a,i)=>{
                a.isClick=false;
                a.isEdit=false;
              })

              for(let i=0;i<this.detailListCopy.length;i++){
                this.images.forEach((a,b)=>{
                  if(this.detailListCopy[i].defaultImg==a.defaultImg){
                    this.detailListCopy[i]=a;
                  }
                })
              }
            }else{
              this.detailListCopy=this.detailList.concat([]);
            }
          }
        }).catch((err) => {
          this.detailListCopy=this.detailList.concat([]);
        })
      },
      getListDetail () {
        let cartId = wx.getStorageSync('cartId')
        this.$http.request({
          method: 'get',
          url: `/api/card/detail/${cartId}`,
          body: {}
        }).then((data) => {
          if (data.code == 200) {
            this.isCart = true
            this.cardData = data.data
          } else {
            wx.showToast({
              title: `${data.message}`,
              icon: 'none',
              duration: 2000
            })
          }
        }).catch((err) => {
          this.isCart = false
        })
      },
      getDetail (id) {
        console.log(this.empId)
        let Authorization1=wx.getStorageSync('Authorization1')
        if(Authorization1){
          if(!this.empId){
            wx.reLaunch({ url: `/pages/cardDetail/main?id=${this.cardData.id}&empId=${this.empId}` })
          }else{
            wx.navigateTo({ url: `/pages/indexDetail/main?id=${this.cardData.id}&empId=${this.empId}&btnStatus=${this.btnStatus}` })
          }
        }else{
          this.isShow=true;
        }


      },

      createCard () {
        let userInfo = wx.getStorageSync('userInfo')
        if(userInfo){
          wx.setStorageSync('isEdit', 0)
          wx.navigateTo({ url: '/pages/createCard/main' })
        }else{
          this.isShow=true;
        }

      },
      // goDetail () {
      //   console.log(1)
      //   wx.reLaunch({ url: `/pages/cardDetail/main?id=${this.cartId1}` })
      // },
      onDragSortChange (e) {
        //  console.log(e)
        // frontData 插到谁后面
        // data 操作的数据
      }
    },

    created () {
      // let app = getApp()
    }
  }
</script>
<style>
  ._van-notice-bar{
    font-size: 28rpx;
  }
  .van-notice-bar__wrap{
    font-size: 37rpx;
  }
</style>
<style  scoped>

  .cartPosition{
    width: 100%;
    position: absolute;
    top:16rpx;
    left:0;
    z-index: 1000;
  }
  .bannerTitle{
    width: 100%;
    text-align: center;
    overflow: hidden;
    margin-bottom:20rpx;
    text-overflow: ellipsis;
  }
  .bannerBox{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  /*.bannerBox img{*/
  /*  width: 80%;*/
  /*  height: 400rpx;*/
  /*}*/
  .cartBox{
    width: 90%;
    height:323rpx ;
    background: #f7f7f7;
    position: relative;
    margin:0 auto;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #999;
    border-left: 5px solid rgb(61,176,243);
    border-bottom: 5px solid rgb(61,176,243);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:40rpx;
    padding:30rpx 15rpx;

  }
  .cartBox>ul>li>span:first-child{
    margin-right: 10rpx;
    color: #999;
    display: inline-block;
    width:170rpx ;
  }
  .banner{
    /*background-color: #fff;*/
    height: 500rpx;
    width: 100%;
    margin-top:400rpx;
    margin-bottom: 25rpx;
  }
  .banner>.swiper{
    height:500rpx;
    background-color: #fff;
    /*background-color: rgb(244,243,249);*/
  }
  .product{
    width: 100%;
    /*background: #fff;*/
    box-sizing: border-box;
    padding:20rpx;
    font-size: 28rpx;
    background-color: #fff;
    /* margin-bottom: 20rpx; */
  }
  .banner ._swiper{
    padding:20rpx 0;
  }
  .banner ._swiper-item{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .product>.product_list{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .product>.product_list>li{
    width:45%;
    box-sizing: border-box;
    border-radius: 20rpx;
    /*box-shadow: 5px 5px 5px rgb(251,251,251);*/
    /* margin-bottom: 20rpx; */
  }
  .product>.product_list>li>p{
    text-align: center;
  }
  .product>.product_list>li>img{
    border:1px solid #ddd;
    max-width: 100%;
    height:450rpx;

  }
  /*  .banner img {
      width: 100%;
      display: block;
    } */
  .page{
    width: 100%;
    height: 100% ;
    background: #fff;
    box-sizing: border-box;
    font-size: 28rpx;
    padding:20rpx 0;
  }

  .cartBox .more{
    text-align: right;
  }

  .cartBox .more img{
    width: 64rpx;
    height: 64rpx;
  }
  .cart_bt p:first-child{
    font-size: 50rpx;
    color:rgb(114,114,114)
  }
  .cart_bt p:last-child{
    color:rgb(131,131,133)
  }
  .createShare{
    width: 35%;
    height: 100%;
    background: #3cc51f;
    margin-left: 25rpx;
    color: #fff;
    line-height: 80rpx;
  }
  .createOut{
    width: 90%;
    height:80rpx ;
    position: fixed;
    right:5% ;
    bottom:3%;
    /*background: rgb(63,176,244);*/
    transition: all 1s;
    border-radius: 20px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    box-sizing: border-box;
    padding-right:20rpx;
    font-size: 36rpx;
    text-align: center;
  }
  .create{
    background: rgb(63,176,244);
    width: 100%;
    height: 100%;
    text-align: center;
    border-radius: 20px;
    color: #fff;
    line-height: 80rpx;
    box-sizing: border-box;
    padding-right:20rpx;
    font-size: 36rpx;
    text-align: center;
    /*padding-left: 20rpx;*/
  }
  .fz{
    width: 100%;
    position: absolute;
    bottom:15%;
    left:0;
    color: #333333;
  }
  .create>span{
    white-space: nowrap;
    overflow: hidden;
    margin:0 auto;
  }
  .create.active{
    width: 90%;
    transition: all 1s;
  }

  .samll{
    width: 80rpx;
    height:80rpx;
    position: absolute;
    top:0;
    right: 10rpx;
    border-radius: 50%;
    text-align: center;
    line-height:80rpx;
  }
  .samll img{
    width:64rpx;
    height: 64rpx;
    margin-left: 10rpx;
    margin-right: 10rpx;
  }
  .cart_top{
    /* margin:20rpx; */
    display: flex;
    justify-content: space-between;
    margin-bottom: 50rpx;
  }
  .cart_top p:first-child{
    color: rgb(170,169,175);
  }
  .cart_top img{
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }
  .box{
    width: 74rpx;
    height:120rpx;
    background-color: rgba(255,255,255,.5);
    border:1px solid rgb(61,176,243);
    /* border: 1px solid rgb(61,176,243); */
    border-radius: 30rpx;
    position: fixed;
    bottom:8%;
    right: 5%;
    font-size: 22rpx;
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-content: center;*/
    /*flex-wrap: wrap;*/

    text-align: center;
    transform :translateY(-60rpx);
  }
  .box>li{
    width: 100%;
    height:57%;
    margin-top:22%;
  }

  #share{
    width: 100%;
    height: 100%;
    background-color: transparent;
    border:none;
    padding-left: 0;
    padding-right: 0;
    line-height: 80rpx;
    font-size: 30rpx;
    display: initial;
    color: #fff;
    box-sizing: border-box;
    padding:10rpx 0;
  }
  #share:after{
    border:none;
  }
  .box>li:first-child{
    /*margin-bottom: 10rpx;*/
  }
  .box img{
    width: 40rpx;
    height: 40rpx;
    /*margin-top:26rpx;*/
  }
</style>
